<template>
  <div class="accountleft">
    <ul>
      <li class="flex header">
        <div class="header-one">{{$t("ac.mortgageResource")}}</div>
        <div class="header-two">{{resource.totalResource}}</div>
      </li>
      <li class="flex content">
        <div class="content-one">
          <p>CPU</p>
          <p>{{$t("ac.use")}}</p>
        </div>
        <div class="content-two">
          <p>{{resource.cpuResource}}</p>
          <div class="flex speed ">
            <div class="speed-line ">
              <el-progress :text-inside="true" :show-text="false" :stroke-width="5" :percentage="percent.cpu"
                           color="#98889b"></el-progress>
            </div>
            <div class="speed-num">
              <span>{{resource.cpuUsed}} /</span>
              <span>{{resource.cpuTotal}}</span>
            </div>
          </div>
        </div>
      </li>
      <li class="flex content">
        <div class="content-one">
          <p>NET</p>
          <p>{{$t("ac.use")}}</p>
        </div>
        <div class="content-two">
          <p>{{resource.netResource}}</p>
          <div class="flex speed ">
            <div class="speed-line ">
              <el-progress :text-inside="true" :show-text="false" :stroke-width="5" :percentage="percent.net"
                           color="#98889b"></el-progress>
            </div>
            <div class="speed-num">
              <span>{{resource.netUsed}} /</span>
              <span>{{resource.netTotal}}</span>
            </div>
          </div>
        </div>
      </li>
      <li class="flex content">
        <div class="content-one">
          <p>RAM</p>
          <p>{{$t("ac.use")}}</p>
        </div>
        <div class="content-two">
          <p>{{resource.ramResource}}</p>
          <div class="flex speed ">
            <div class="speed-line ">
              <el-progress :text-inside="true" :show-text="false" :stroke-width="5" :percentage="percent.ram"
                           color="#98889b"></el-progress>
            </div>
            <div class="speed-num">
              <span>{{resource.ramUsed}} /</span>
              <span> {{resource.ramTotal}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import {getResource} from '../../api/chainApi'

  export default {
    data() {
      return {
        resource: {
          totalResource: "0 DATX",	//已质押资源
          cpuResource: "0 DATX",		//CPU
          cpuUsed: "0 ms",		//cpu资源已用
          cpuTotal: "0 ms",		//cpu资源总量
          netResource: "0 DATX",		//NET
          netUsed: "0 KB",		//net资源已用
          netTotal: "0 KB",		//net资源总量
          ramResource: "0 DATX",		//RAM
          ramUsed: "0 KB",			//ram资源已用
          ramTotal: "0 KB"		//ram资源总量
        },
        percent: {
          cpu: 0,
          net: 0,
          ram: 0
        }
      }
    },
    created() {
      let datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
      getResource(datxDetail.name).then(res => {
        this.resource = res.data;
        this.calPercent();
      })
    },
    methods: {
      calPercent: function () {
        let cpuUsed = this.resource.cpuUsed.replace(/[^\d.]/g, '');
        let cpuAll = this.resource.cpuTotal.replace(/[^\d.]/g, '');
        this.percent.cpu = parseFloat(cpuUsed) * 10 / parseFloat(cpuAll);
        let ramUsed = this.resource.ramUsed.replace(/[^\d.]/g, '');
        let ramAll = this.resource.ramTotal.replace(/[^\d.]/g, '');
        this.percent.ram = parseFloat(ramUsed) * 10 / parseFloat(ramAll);
        let netUsed = this.resource.netUsed.replace(/[^\d.]/g, '');
        let netAll = this.resource.netTotal.replace(/[^\d.]/g, '');
        this.percent.net = parseFloat(netUsed) * 10 / parseFloat(netAll);
        this.percent.cpu = this.percent.cpu < 1 ? 1 : this.percent.cpu;
        this.percent.net = this.percent.net < 1 ? 1 : this.percent.net;
        this.percent.ram = this.percent.ram < 1 ? 1 : this.percent.ram;
      }
    }
  }
</script>


<style lang="less" scoped>
  .accountleft {
    background: #fff;
    min-height: 325px;
    border-radius: 4px;
    ul {
      list-style: none;
      padding: 15px 40px;
      li {
        color: #000000;
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
      }
      .header {
        font-size: 16px;
        font-weight: bold;
        &-one {
          width: 30%;
        }
        &-two {
          width: 70%;
        }
      }
      .content {
        &-one {
          width: 30%;
          p:first-child {
            font-weight: bold;
            margin-bottom: 10px;
          }
        }
        &-two {
          width: 70%;
          p {
            margin-bottom: 10px;
          }
          .speed {
            .speed-line {
              width: 125px;
              padding-top: 9px;
            }

            .speed-num {
              padding-left: 30px;
              span {
                font-size: 12px;
                color: #666666;
              }
            }
          }
        }
      }
    }
    .flex {
      display: flex;
    }
  }
</style>

